﻿$border-sides: ("top":"top", "end":"right", "bottom":"bottom", "start":"left");
$border-sizes: (1, 2, 3, 4, 5);

@each $size in $border-sizes {
    .border-#{$size} {
        border: #{$size}px solid $border-color !important;

        @each $color-name, $color-value in $theme-colors {
            &.border-#{$color-name} {
                border-color: $color-value !important;
            }
        }

        @each $color-name, $color-value in $theme-colors-border-subtle {
            &.border-#{$color-name}-subtle {
                border-color: #{$color-value} !important;
            }
        }
    }

    @each $color-name, $color-value in $theme-colors {
        .border-#{$color-name}-#{$size} {
            border: #{$size}px solid $color-value !important;
        }
    }

    @each $side-name, $side-value in $border-sides {
        .border-#{$side-name}-#{$size} {
            border-#{$side-value}: #{$size}px solid $border-color !important;
        }

        @each $color-name, $color-value in $theme-colors {
            .border-#{$color-name}-#{$side-name}-#{$size} {
                border-#{$side-value}: #{$size}px solid $color-value !important;
            }
        }
    }
}
